<route lang="json">
{
  "style": { "navigationBarTitleText": "首页" },
  "name": "myHome"
}
</route>
<template>
  <view class="min-h-100vh flex items-center justify-center bg-cyan" v-if="tabbar === 0">
    <view class="text-24px">页面1</view>
  </view>
  <view class="min-h-100vh flex items-center justify-center bg-amber" v-if="tabbar === 1">
    <view class="text-24px">页面2</view>
  </view>
  <view class="min-h-100vh flex items-center justify-center bg-fuchsia" v-if="tabbar === 2">
    <view class="text-24px">页面3</view>
  </view>
  <wd-tabbar custom-class="sub-tabbar" fixed shape="round" placeholder safeAreaInsetBottom v-model="tabbar">
    <wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
    <wd-tabbar-item title="Ai" icon="android"></wd-tabbar-item>
    <wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
  </wd-tabbar>
</template>

<script setup lang="ts">
const tabbar = ref(0);
</script>
<style lang="scss">
:deep(.sub-tabbar) {
  margin-bottom: 34rpx;
}
</style>
